<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/warn_bg.png') +')'}">
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#fff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		</u-navbar>
		 
		<view class="title rel">
		  <view class="font-36 text-bold c-base">设置预警值</view>
		  <view class="font-24 c-base">填写预警区间，超出提醒</view>
		  <image :src="$util.img('image/warn_1.png')" mode="" class="icon"></image>
		</view>
		
		<!-- <view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				体重
				<text class="c-a4">(kg)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				血压
				<text class="c-a4">(mmHg)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view> -->
		
		<block v-for="(item,index) in infoList" :key="index">
			<view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24">
				<text class="line"></text>
				{{item.name}}
			</view>

			<view class="boxPanel flex-between" v-for="(opitem,opindex) in item.list" :key="opindex">
				<view class="font-weight-5 flex-y-baseline">
					{{opitem.name}}
					<text class="c-a4">({{opitem.default_unit}})</text>
				</view>
				<view class="flex-y-center">
				<input type="text" v-model="opitem.min_value"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
				<u-line color="#172140" length="46rpx"></u-line>
				<input type="text" v-model="opitem.max_value"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
				</view>
			</view>

		</block>
		
		
		
		
		<!-- <view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				体脂率
				<text class="c-a4">(%)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				腰围
				<text class="c-a4">(cm)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view>
		
		<view class="boxPanel flex-between">
			<view class="font-weight-5 flex-y-baseline">
				肺活量
				<text class="c-a4">(次)</text>
			</view>
			<view class="flex-y-center">
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center" style="width: 100rpx;">
			  <u-line color="#172140" length="46rpx"></u-line>
			  <input type="text"  placeholder="请输入" placeholder-class="inputs" class="text-center m-l-20" style="width: 100rpx;">	  
			</view>
		</view> -->
		
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="saveWarnValues()">
			  保存
			</view>
		</view>
		 
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				infoList: [],
				loading: false
			}
		},
		onLoad(data) {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
		  this.getData();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getUserAlert",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.infoList = res.data;
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			saveWarnValues() {
			   // 验证表单

				for (let k in this.infoList){
					// console.log(k)  //获取对象key
					// console.log(this.infoList[k])  
					const category = this.infoList[k];
					for (let j = 0; j < category.list.length; j++) {
						const item = category.list[j];
						if (item.min_value == null || item.max_value == null) {
							this.$util.showToast({title: `请填写完整的${item.name}预警值`})
							return
						}
						if (Number(item.min_value) >= Number(item.max_value)) {
							this.$util.showToast({title: `${item.name}的最小值不能大于等于最大值`, icon: 'none'})
							return
						}
					}
				}
				


			   console.log("888",this.infoList)

				//  按照这种形式整合传递数据
			 	let alertData = [];

				for (let k in this.infoList) {
					// console.log(k)  //获取对象key
					// console.log(this.infoList[k])  
					const category = this.infoList[k];
					for (let j = 0; j < category.list.length; j++) {
						const item = category.list[j];
						let obj = {};
						obj.metric_id = item.id;
						obj.min_value = item.min_value;
						obj.max_value = item.max_value;
						alertData.push(obj)
					}
					
				}


			    console.log("888",alertData)
			  
				this.loading = true
				this.$api.sendRequest({
					url: "/api/userHealth/setUserAlert",
					data: { alerts: alertData },
					success: res => {
						if(res.code == 0) {
							this.$util.showToast({title: '保存成功'})
							setTimeout(() => {
							uni.navigateBack()
							}, 1500)
						} else {
							this.$util.showToast({title: res.message || '保存失败', icon: 'none'})
						}
					},
					fail: () => {
						this.$util.showToast({title: '网络错误，请重试', icon: 'none'})
					},
					complete: () => {
						this.loading = false
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 531rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}

.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}
// 顶部
.title {
  position: relative;
  padding: 0 24rpx 0;
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 261rpx;
    height: 178rpx;
  }
}

.boxPanel {
	position: relative;
	padding: 30rpx 24rpx;
	.inputs {
		font-size: 28rpx;
		color: #B8BAC2;
	}
}

.submit {
	background-color: #FF4D21;
}
</style>
